<template>
	<view class="add" style="transform: translateX(900px);" :animation="animateData3">
		<view class="header"><text>分享你的作品</text></view>
		<dropprogress v-if="ifupdate" :current="totalProgress"></dropprogress>
		<view class="blackTier" :animation="animateData2" style="opacity: 0;" v-if="showBlackTiers" @click="cancelChooseAvatar"></view>
		<view class="bottomBarAvatar" :style="{bottom:bottom}"
		 style="opacity: 0;transform: translateY(200px);" :animation="animateData1" v-if="showBottomBarAvatar">
			<view v-for="(item, index) in uploadWay" :key="item.id">
				<view @click="chooseUpdateWay(index)" class="AvatarItem">{{ item.way }}</view>
			</view>
		</view>
		<!-- <mavon-editor v-model="content" ref="md" v-show="ifWrite" 
		:codeStyle="codeStyle" @save="save" class="mavonWrite" /> -->
		<ly-markdown :showPreview="ifaa" style="height: calc(100vh - 120px);" 
		ref = "markdown"
		v-show="ifWrite" 
		@changeData="changeData"
		@save = "save">
		</ly-markdown>
		<view class="contain">
			<form @submit="startUpdateProd">
				<view class="titleBox">
					<input class="title" type="text" value="" v-model="title" placeholder="请填写标题..." />
					<view class="warnText" v-if="hasTitle">请填写标题</view>
				</view>
				<view class="way">
					<radio-group name="" @change="changeWay">
						<text class="itemWay">你分享的类型:</text>
						<label>
							<radio class="videoRadio" value="video" checked="true" />
							<text>视频</text>
						</label>
						<label>
							<radio value="text" />
							<text>专栏</text>
						</label>
					</radio-group>
				</view>
				<view class="chooseVideo" v-if="way === 'video'">
					<text>点击选择你的视频:</text>
					<button type="primary" size="mini" @click="chooseVideo">选择视频</button>
					<view class="name">
						视频名字:
						<text>{{ VideoName }}</text>
					</view>
					<view class="warnText" v-if="hasVideo">你还没有选择视频呀(⊙﹏⊙)</view>
				</view>
				<view class="chooseText" v-if="way === 'text'">
					<text>点击编辑你的专栏:</text>
					<button type="primary" size="mini" @click="edit">编辑专栏</button>
					<view class="warnText" v-if="hasText">编写专栏喽(⊙﹏⊙)</view>
				</view>
				<view class="chooseImg">
					<text>点击选择视频(专栏)封面:</text>
					<button type="primary" size="mini" @click="chooseImage">选择封面</button>
					<image class="image" :src="posterSRC"></image>
				</view>

				<view class="option">
					<button form-type="submit" type="primary" size="mini" 
					:disabled="ifCompete || ifupdate">确定</button>
					<button class="cancel" @click="cancel" size="mini" :disabled="ifupdate">取消</button>
					<button @click="ReadyDelProd" size="mini" v-if="origin==='update'"
					 :disabled="ifupdate" type="warn">删除</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
import lyMarkdown from '../markdown/ly-markdown.vue'
import animate from '../../animate.js';
import dropprogress from "../progress/progress.vue"
export default {
	mixins: [animate.mixin],
	components: {
		dropprogress,
		lyMarkdown
	},
	props: {
		origin: {
			type: String,
			default: 'add'
		},
		id:{
			type:Number,
			default:0
		}
	},
	data() {
		return {
			
			ifaa:true,
			textareaData: "",
			textareaHtml:"",
			flag:false,
			ifWrite: false,
			title: '',
			ifupdate: false,
			way: 'video',
			chooseWayForvideo: [{ id: 1, way: '从相册中选择' }, { id: 2, way: '摄像' }],
			chooseWayForImage: [{ id: 0, way: '预览' }, { id: 1, way: '从相册中选择' }, { id: 2, way: '拍照' }],
			showBottomBarAvatar: false,
			showBlackTiers: false,
			uploadWay: [],
			posterSRC: null,
			videoSRC: '',
			isVideo: false,
			isImg: false,
			html: '',
			content: '',
			VideoName: '',
			files: [],
			totalProgress:0,
			aaa:0,
		};
	},
	computed: {
		bottom(){
			return this.origin=='add'?"0px":"0px"
		},
		ifCompete() {
			return this.title.trim() === '' || (this.videoSRC === '' && this.textareaData.trim() === '');
		},
		hasTitle() {
			return this.title.trim() === '';
		},
		hasVideo() {
			return this.way === 'video' && this.videoSRC !== '' ? false : true;
		},
		hasText() {
			return this.way === 'text' && this.textareaData.trim() !== '' ? false : true;
		},
		formData() {
			let data = {
				username: this.user.username,
				title: this.title,
				origin: this.origin,
				way: this.way,
				status: this.user.status
			};
			if (this.origin === 'update') {
				data.id = this.id;
			}
			if (this.videoSRC) {
				data.format = this.format;
			}
			if (this.textareaData) {
				data.format = 'txt';
				data.render = this.textareaHtml;
				data.text = this.textareaData;
			}
			return data;
		},
		LastFiles(){
			return this.files.length===0?[{name:"mp4file",uri:null}]:this.files
		}
	},
	methods: {
			changeData(item1,item2){
				this.textareaData = item1
				this.textareaHtml = item2
				console.log(this.textareaData)
				console.log(this.textareaHtml)
			},
		save(){
			this.ifWrite = false
		},
		ReadyDelProd(){
			this.$emit("readyDelProd",this.id,this.$attrs.prodItem)
		},
		startUpdateProd() {
			this.ifupdate = true;
			this.flag = true
			if(this.flag){
				console.log(this.formData)
				const updateProgress = uni.uploadFile({
					url: 'https://www.ttzxh.icu:443/api/upload/upMp4',
					files: this.LastFiles,
					formData: this.formData,
					headers: {
						Authorization: uni.getStorageSync('LoginToken'),
						'Content-Type': 'multipart/form-data'
					},
					method: 'post',
					success: res => {
						console.log(res);
						let result = JSON.parse(res.data)
						if (result.error === -1) {
								this.cancel()
						} else {
							
						}
					},
					fail: (err) => {
						console.log("出错")
						console.log(err)
						updateProgress.abort();
					},
					complete: () => {
						this.ifupdate = false;
						this.flag = false
					}
				});

			}
		},
		edit() {
			this.ifWrite = true;
			this.opacity = 1;
		},
		chooseUpdateWay(index) {
			return this.isImg ? this.detailImg(index) : this.detailVideo(index);
		},
		previewImage() {
			uni.previewImage({
				urls: [this.posterSRC],
				fail: err => {
					console.log(err);
				},
				success: () => {
					this.cancelChooseAvatar();
				}
			});
		},
		chooseImageFromCamera() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original'],
				sourceType: ['camera'], //从相机选择
				success: res => {
					console.log(res);
					const tempFilePaths = res.tempFilePaths;
					this.posterSRC = res.tempFilePaths[0];
					
					this.cancelChooseAvatar();
				}
			});
		},
		chooseImageFromAlbum() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original'],
				sourceType: ['album'], //从相册选择
				success: res => {
					console.log(res);
					const tempFilePaths = res.tempFilePaths;
					this.posterSRC = tempFilePaths[0];
					this.files.push({ name: 'mp4file', uri: this.posterSRC })
					this.cancelChooseAvatar();
					
					// }
				}
			});
		},
		chooseVideoFromCamera() {
			uni.chooseVideo({
				count: 1, //默认9
				sourceType: ['camera'], //从相机选择
				success: res => {
					console.log(res);
					const tempFilePaths = res.tempFilePath;
					this.videoSRC = tempFilePaths;
					this.VideoName = res.tempFilePath;
					let formatarr = this.VideoName.split('.');
					this.format = formatarr[formatarr.length - 1];
					this.files.push({ name: 'mp4file', uri: this.videoSRC });
					this.cancelChooseAvatar();
				}
			});
		},
		chooseVideoFromAlbum() {
			uni.chooseVideo({
				count: 1, //默认9
				sourceType: ['album'], //从相机选择
				success: res => {
					console.log(res);
					const tempFilePaths = res.tempFilePath;
					this.videoSRC = tempFilePaths;
					this.VideoName = res.tempFilePath;
					let formatarr = this.VideoName.split('.');
					this.format = formatarr[formatarr.length - 1];
					this.files.push({ name: 'mp4file', uri: this.videoSRC });
					this.cancelChooseAvatar();
				}
			});
		},
		detailVideo(index) {
			switch (index) {
				case 0:
					this.chooseVideoFromAlbum();
					break;
				case 1:
					this.chooseVideoFromCamera();
					break;
			}
		},
		detailImg(index) {
			switch (index) {
				case 0:
					this.previewImage();
					break;
				case 1:
					this.chooseImageFromAlbum();
					break;
				case 2:
					this.chooseImageFromCamera();
					break;
			}
		},
		chooseImage() {
			this.isImg = true;
			this.uploadWay = this.chooseWayForImage;
			this.showBottomBarAvatar = true;
			this.showBlackTiers = true;
			this.fadeInTranslateY();
			this.fadeInProd();
		},
		chooseVideo() {
			this.isVideo = true;
			this.uploadWay = this.chooseWayForvideo;
			this.showBottomBarAvatar = true;
			this.showBlackTiers = true;
			this.fadeInTranslateY();
			this.fadeInProd();
		},
		cancelChooseAvatar() {
			setTimeout(() => {
				this.showBlackTiers = false;
				this.showBottomBarAvatar = false;
			}, 300);
			this.isImg = false;
			this.isVideo = false;
			this.fadeOutProd();
			this.fadeOutTranslateYless();
		},
		changeWay(way) {
			this.videoSRC = '';
			this.VideoName = '';
			this.textareaData = ""
			this.textareaHtml = ""
			this.$refs.markdown.textareaData = '';
			this.$refs.markdown.textareaHtml = '';
			console.log(way.target.value);
			this.way = way.target.value;
		},
		cancel() {
			setTimeout(()=>{
				this.$emit("disappealAddProd")
				this.Right();
			},400)
		},
		In() {
			this.Left();
		}
	}
};
</script>

<style lang="scss" scoped>
	
	
.parser {
	width: 100%;
	height: 300px;
}
.warnText {
	font-size: 14px;
	color: red;
	font-weight: 100;
}
.container {
	padding: 10px;
}

#editor {
	width: 100%;
	height: 300px;
	background-color: #cccccc;
}
.mavonWrite {
	transition: all 0.3s;
	position: absolute;
	z-index: 999;
}
.add {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 8;
	background-color: rgba($color: #fff, $alpha: 1);
	.header {
		width: 100%;
		height: 50px;
		padding-top: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 15px 0 #999999;
	}
	.blackTier {
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 10;
	}
	.bottomBarAvatar {
		width: 100%;
		background-color: #fff;
		position: fixed;
		// bottom: 50px;
		z-index: 3000;
		text-align: center;
		.AvatarItem {
			width: 100%;
			line-height: 50px;
			transition: all 0.2s;
			&:active {
				background-color: #ddd;
			}
		}
	}
	.contain {
		padding: 20px 15px 0px 15px;
		.option {
			button {
				padding: 5px 35px;
				margin: 35px 15px;
			}
		}
		.titleBox {
			position: relative;
			padding-bottom: 20px;
			input {
				width: 600upx;
				height: 30px;
				background-color: #f1f1f1;
				padding: 5px 15px;
				border-radius: 40px;
			}
			.warnText {
				position: absolute;
				bottom: 0;
			}
		}
		.way {
			margin: 15px 0;
			.itemWay {
				margin: 0 20px 0 0;
			}
			label {
				margin: 0 10px;
			}
		}
		.chooseText {
			position: relative;
			padding: 12px 0px;
			button {
				vertical-align: middle;
				margin-left: 20px;
			}
			.warnText {
				position: absolute;
				bottom: 0;
			}
		}
		.chooseVideo {
			position: relative;
			padding: 17px 0px;
			button {
				vertical-align: middle;
				margin-left: 20px;
			}
			.name {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.warnText {
				position: absolute;
				bottom: 0;
			}
		}
		.chooseImg {
			position: relative;
			button {
				margin-left: 20px;
				vertical-align: middle;
			}
			.image {
				width: 400upx;
				height: 200upx;
				background-color: #c8c7cc;
				margin-top: 10px;
			}
		}
	}
}
</style>
